<template>
  <div style="display: inline-block;">
    <span class="caret-wrapper"
      ><i
        :class="sortOrder === `${prop}ascending` ? 'sort-caret ascending asce-active' : 'sort-caret ascending'"
        @click="handleSortChange(prop, 'ascending')"
      ></i
      ><i
        :class="sortOrder === `${prop}descending` ? 'sort-caret descending desc-active' : 'sort-caret descending'"
        @click="handleSortChange(prop, 'descending')"
      ></i
    ></span>
  </div>
</template>

<script>
export default {
  props: {
    prop: {
      type: String,
      default: "",
    },
    activeSort: {
      type: String,
      default: "",
    },
  },
  watch: {
    activeSort(newVal, oldVal) {
      this.$nextTick(() => {
        this.sortOrder = newVal;
      })
    },
  },
  data() {
    return {
      sortOrder: null,
    };
  },
  methods: {
    handleSortChange(prop, order) {
      this.$emit("sort-change", { prop, order });
    },
  },
};
</script>

<style scoped>
.asce-active {
  border-bottom-color: #2A72EE!important;
}
.desc-active {
  border-top-color: #2A72EE!important;
}
</style>
